<template>
  <div class="ym">
      <div class="main">
        <img class="topicimg" src="@/assets/img/picture/biao_xi.png" alt="">
        <div class="maincontent">
          <div @click="back" class="back">
              <div class="center">
                  <img src="@/assets/img/icon/forget_back.png" alt="">
              </div>
              返回
          </div>
          <div class="content">
              <div class="forgetpass">忘记密码</div>
              <div class="inputbox zhanghao" :class="errType.zhanghaoNull||errType.zhanghaoType?'err':''"><!--账号-->
                  <div class="center">
                      <img class="photo" src="@/assets/img/icon/forget_yzm.png" alt="">
                  </div>
                  <input class="yzmnum" v-model="zhanghaoNum" placeholder="请输入邮箱" type="text">
              </div>
              <div class="errPrompt" v-if="errType.zhanghaoNull">请输入账号</div>
              <div class="errPrompt" v-if="errType.zhanghaoType">账号格式错误</div>
              <div class="yzm" :class="nullYzm?'err':''">
                  <input placeholder="请输入右边的四位数字" type="text">
                  <img @click="changeyzm" class="yzmcode" :src="this.yzmsrc" alt="">
              </div>
              <div v-show="nullYzm" class="errPrompt erryzm">请输入验证码</div>
              <div v-show="typeYzm" class="errPrompt erryzm">验证码格式错误</div>
              <div v-show="errAll" class="errPrompt erryzm">用户名或密码错误</div>
              <div class="newpass inputbox" :class="errType.passNull0||errType.passType?'err':''"><!--第一个密码-->
                  <div class="center">
                    <img class="photo" src="@/assets/img/icon/forget_password.png" alt="">
                  </div>
                  <input v-model="newPass0" placeholder="新密码" :type="showEye === true?'text':'password'">
                  <img @click="showPassword()" class="eye" v-if="showEye" src="@/assets/img/icon/login_openEye.png" alt="">
                  <img @click="showPassword()" class="eye" v-else src="@/assets/img/icon/login_closeEye.png" alt="">
              </div>
              <div class="errPrompt" v-if="errType.passType">密码格式错误</div>
              <div class="errPrompt" v-if="errType.passNull0">请输入密码</div>
              <button @click="submit" class="submit">确认</button>
          </div>
        </div>
      </div>
  </div>
</template>

<style scoped lang="scss">
.ym{
  height: 100vh;
  background-image: url('@/assets/img/picture/background.jpg');
  background-size: 100% 100% ;
  display: flex;
  align-items: center;
  justify-content: right;
  .main{
      width: 450px;
      display: grid;
      margin-right: 150px;
      .topicimg{
        height: 90px;
        width: 75%;
        display: block;
        margin: 0 auto 30px;
      }
      .maincontent{
        background-color: white;
        border-radius: 15px;
        padding: 50px;
        position: relative;
        opacity: 0.9;
        .inputbox:hover input{
        border: 1px solid #3A8BFF;
        border-radius: 30px;
      }
      .err{
          border-color: #FF5152!important;
      }
      .errPrompt{
          font-size: 12px;
          color: #FF5152;
          padding-left: 24px;
      }
      .erryzm{
          bottom: 70px;
          left: 25px;
      }
      input::placeholder{
          color: #91A0B5;
      }
      .back{
          position: absolute;
          display: flex;
          font-size: 14px;
          color: #91A0B5;
          top: 30px;
          left: 30px;
          line-height: 14px;
          img{
              width: 14px;
              height: 14px;
              line-height: 16px;
              margin-right: 4px;
          }
      }
      .service{
          position: absolute;
          top: 30px;
          right: 30px;
          font-size: 14px;
          color: #91A0B5;
      }
      .content{
          display: grid;
          position: relative;
          .forgetpass{
              color: #181E33;
              font-size: 20px;
              margin: 10px 0px;
          }
          .zhanghao{
              height: 50px;
              border-radius: 25px;
              border: 1px solid #d4d6d9;
              display: flex;
              position: relative;
              margin-bottom: 24px;
              .countdown{
                position: absolute;
                font-size: 14px;
                color: #9fa0a2;
                right: 15px;
                top: 15px;
              }
              .yzmnum{
                  flex: 1;
                  height: 50px;
                  padding: 0 54px 0 54px;
                  background: transparent;
              }
              .getyzm{
                  line-height: 50px;
                  position: absolute;
                  right: 24px;
                  color: #3A8BFF;
              }
          }
          .yzm{
              display: flex;
              height: 48px;
              margin-bottom: 24px;
              border: 1px solid #d4d6d9;
              border-radius: 24px;
              align-items: center;
              input{
                  padding: 0 24px;
                  height: 100%;
                  flex: 1;
                  border-radius: 24px;
              }
              .yzmcode{
                  padding-left: 10px;
                  margin-right: 20px;
                  width: 96px;
                  height: 38px;
              }
              &:hover{
                  border: 1px solid #3A8BFF;
              }
          }
          .photo{
              height: 18px;
              width: 18px;
              position: absolute;
              top: 15px;
              left: 20px;
          }
          .newpass{
              display: flex;
              position: relative;
              border-radius: 25px;
              border: 1px solid #d4d6d9;
              margin-bottom: 24px;
              input{
                  background: transparent;
                  height: 50px;
                  padding: 0 60px 0 54px;
                  width: 100%;
              }
              .eye{
                  width: 18px;
                  height: 18px;
                  position: absolute;
                  top: 17px;
                  right: 24px;
              }
          }
          .request{
              position: absolute;
              font-size: 12px;
              color: #A8A8B3;
              padding-left: 24px;
              line-height: 1;
              bottom: -18px;
          }
          .submit{
              width: 100%;
              height: 50px;
              border-radius: 25px;
              background: linear-gradient(to right,rgb(125, 162, 246),rgb(70, 134, 245));
              margin: 0 0 10px 0;
              color: white;
              font-size: 18px;
              box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.3);
          }
        }
      }
      
  }
}
</style>

<script>
import axios from 'axios'
import { mapState, mapGetters } from 'vuex'
export default {
data () {
  return {
    yzmsrc: require('@/assets/img/picture/yzm.jpg'),
    nullYzm: false,
    typeYzm: false,
    showeye: false,
    showEye: false,
    zhanghaoNum: '',
    newPass0: '',
    newPass1: '',
    errType: {
      zhanghaoNull: false,
      zhanghaoType: false,
      passErr: false,
      passNull0: false,
    }
  }
},
methods: {
  changeyzm () {
    this.yzmsrc = require('@/assets/img/picture/yzm2.jpg')
    axios({
      url: ''
    }).then(res => {
      console.log(res.data.data)
      this.yzmsrc = require('@/assets/img/picture/yzm2.jpg')
      this.requireYzm = res.yzm
    }, err => {
      console.log(err)
    })
  },
  showPassword () {
    this.showeye = !this.showeye
  },
  submit () {
      Object.keys(this.errType).forEach(key => this.errType[key]=false);
      axios.post('http://localhost:8081/api/sysadmindr',{
        'user_account': this.zhanghaoNum,
        'user_password': this.newPass0
      }).then(res => {
        if(res.data.code === 200){
          this.$router.push('/mainhome')
        }else {
          this.errType.password = true
        }
      }).catch(err => {
        console.error(err)
      })
  },
  toShowList () {
    this.showList = true
  },
  back () {
    this.$router.back()
  },
  getyzm () {
    this.showZhanghao = false
    const timer = setInterval(() => {
      if (this.time === 0) {
        clearInterval(timer)
        this.showZhanghao = true
      }
      this.time -= 1
    }, 1000)
  },
  handleClickOutside (event) {
    const phoneList = this.$refs.phoneList
    if (phoneList !== event.target && this.showList === true) {
      this.showList = false
      this.SEARCH = ''
    }
  },
},
computed: {
  ...mapState('PhoneAreaNum', ['country']),
  ...mapGetters('PhoneAreaNum', ['searchCountry'])
},
beforeUnmount() {
  document.removeEventListener('click', this.handleClickOutside)
},
mounted() {
  document.addEventListener('click', this.handleClickOutside)
}
}
</script>
